<template>
<el-button type="success" @click="open(null)">新增</el-button>


 <el-table :data="GetSthd" style="width: 100%">
    <el-table-column prop="inoutid" label="入库编码" width="150" />
     <el-table-column prop="typename" label="出入库名称" width="130" />
      <el-table-column prop="direction" label="出入库方向" width="130" >
         <template #default="scope">
        <span>{{ scope.row.direction == '1' ? '入库' : scope.row.direction == '2' ? '出库' : scope.row.direction }}</span>
      </template>
      </el-table-column>
     <el-table-column prop="warehousename" label="仓库名称" width="120" />
      <el-table-column prop="librarylocationname" label="库位名称" width="130" />
     <el-table-column prop="orderFormId" label="订单编号" width="150" />
      <el-table-column prop="handempid" label="经办人" width="130" />
     <el-table-column prop="unitid" label="单位" width="130" />
      <el-table-column prop="prices" label="单价" width="130" />
     <el-table-column prop="amount" label="出入库总金额" width="130" />
  
  </el-table>
   
<div style="text-align: center; margin-top: 20px;">
  <el-pagination
    v-model:current-page="model.pageindex"
    v-model:page-size="model.pagesize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="model.totalCount"
    @size-change="SelectView"
    @current-change="SelectView"
  />
</div>

  <el-dialog :title="cnm.title" v-model="cnm.isopen" width="600px">
    <!-- 表单区域 -->
    <el-form
  ref="instockForm"
  :model="form"
  label-width="120px"
  style="max-width: 900px; margin: 0 auto;"
>
  <el-row :gutter="20">
    <!-- 左侧列 -->
    <el-col :span="12">
      <!-- 事务编码 -->
      <el-form-item label="入库编码" prop="Inoutid">
        <el-input v-model="form.Inoutid" placeholder="系统自动生成" readonly disabled />
      </el-form-item>

      <!-- 出入库类型 -->
      <el-form-item label="出入库类型" prop="Typeid">
        <el-select v-model="form.Typeid" placeholder="请选择类型" style="width: 100%;">
          <el-option
            v-for="item in Dm_Code"
            :key="item.typeid"
            :label="item.typename"
            :value="item.typeid"
          />
        </el-select>
      </el-form-item>

      <!-- 仓库 -->
      <el-form-item label="仓库" prop="Warehouseid">
        <el-select v-model="form.Warehouseid" placeholder="请选择仓库" style="width: 100%;">
          <el-option
            v-for="item in Dm_Warehouser"
            :key="item.warehouseid"
            :label="item.warehousename"
            :value="item.warehouseid"
          />
        </el-select>
      </el-form-item>

      <!-- 订单编号 -->
      <el-form-item label="订单编号" prop="OrderFormId">
        <el-select v-model="form.OrderFormId" placeholder="请选择订单" style="width: 100%;">
          <el-option
            v-for="item in OrderFormModel"
            :key="item.orderFormId"
            :label="item.orderFormId"
            :value="item.orderFormId"
          />
        </el-select>
      </el-form-item>

      <!-- 项目编码 -->
      <el-form-item label="项目编码" prop="Itemid">
        <el-select v-model="form.Itemid" placeholder="请选择项目" style="width: 100%;">
          <el-option
            v-for="item in Dm_Item"
            :key="item.itemid"
            :label="item.itemname"
            :value="item.itemid"
          />
        </el-select>
      </el-form-item>

      <!-- 数量 -->
      <el-form-item label="数量" prop="Quantity">
        <el-input v-model="form.Quantity" placeholder="请输入数量" />
      </el-form-item>
    </el-col>

    <!-- 右侧列 -->
    <el-col :span="12">


      <!-- 出入库时间 -->
      <el-form-item label="出入库时间" prop="Inoutdate">
        <el-date-picker
          v-model="form.Inoutdate"
          type="datetime"
          placeholder="选择时间"
          style="width: 100%;"
        />
      </el-form-item>

      <!-- 库位 -->
      <el-form-item label="库位" prop="Librarylocationid">
        <el-select v-model="form.Librarylocationid" placeholder="请选择库位" style="width: 100%;">
          <el-option
            v-for="item in Dm_Librarylocation"
            :key="item.librarylocationid"
            :label="item.librarylocationname"
            :value="item.librarylocationid"
          />
        </el-select>
      </el-form-item>

      <!-- 经办人 -->
      <el-form-item label="经办人" prop="Handempid">
        <el-input v-model="form.Handempid" placeholder="请输入经办人" />
      </el-form-item>

      <!-- 批号 -->
      <el-form-item label="批号" prop="Batchcode">
        <el-input v-model="form.Batchcode" placeholder="请输入批号" />
      </el-form-item>

      <!-- 效期 -->
      <el-form-item label="效期" prop="Invaliddate">
        <el-date-picker
          v-model="form.Invaliddate"
          type="datetime"
          placeholder="选择时间"
          style="width: 100%;"
        />
      </el-form-item>
    </el-col>

    <!-- 整行元素 -->
    <el-col :span="24">
      <!-- 备注 -->
      <el-form-item label="备注" prop="Memo">
        <el-input
          v-model="form.Memo"
          type="textarea"
          :rows="3"
          placeholder="选填备注信息"
        />
      </el-form-item>
    </el-col>

    <!-- 分隔行 -->
    <el-col :span="24"><div style="height: 20px;"></div></el-col>

    <!-- 数值区间组 -->
    <el-col :span="12">
      <el-form-item label="上限" prop="Up">
        <el-input v-model="form.Up" placeholder="请输入上限" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="下限" prop="Down">
        <el-input v-model="form.Down" placeholder="请输入下限" />
      </el-form-item>
    </el-col>

    <!-- 顺序号 -->
    <el-col :span="12">
      <el-form-item label="顺序号" prop="Rownum">
        <el-input v-model.number="form.Rownum" placeholder="请输入顺序号" />
      </el-form-item>
    </el-col>

    <!-- 单位 -->
    <el-col :span="12">
      <el-form-item label="单位" prop="Unitid">
        <el-select v-model="form.Unitid" placeholder="请选择单位" style="width: 100%;">
          <el-option
            v-for="item in units"
            :key="item.unitId"
            :label="item.unitName"
            :value="item.unitId"
          />
        </el-select>
      </el-form-item>
    </el-col>

    <!-- 单价 -->
    <el-col :span="12">
      <el-form-item label="单价" prop="Prices">
        <el-input v-model="form.Prices" placeholder="请输入单价" />
      </el-form-item>
    </el-col>

    <!-- 总金额 -->
    <el-col :span="12">
      <el-form-item label="总金额" prop="Amount">
        <el-input v-model="form.Amount" placeholder="请输入总金额" />
      </el-form-item>
    </el-col>
  </el-row>

  <!-- 提交区域 -->
  <el-form-item style="margin-top: 30px; text-align: right;">
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </el-form-item>
</el-form>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { id } from 'element-plus/es/locales.mjs'
// 表单数据
const form = reactive({
  Inoutid: '',
  Typeid: '',
  Direction: '1', // 默认入库
  Inoutdate: '',
  Warehouseid: '',
  Librarylocationid: '',
  OrderFormId: '',
  Handempid: '',
  Memo: '',
  Itemid: '',
  Quantity: '',
  Batchcode: '',
  Invaliddate: '',
  Up: '',
  Down: '',
  Rownum: 0,
  Unitid: '',
  Prices: '',
  Amount: ''
})

const Updateform = reactive({
  id: '',
  Inoutid: '',
  Typeid: '',
  Direction: '1', // 默认入库
  Inoutdate: new Date(),
  Warehouseid: '',
  Librarylocationid: '',
  OrderFormId: '',
  Handempid: '',
  Memo: '',
  Itemid: '',
  Quantity: '',
  Batchcode: '',
  Invaliddate: '',
  Up: '',
  Down: '',
  Rownum: 0,
  Unitid: '',
  Prices: '',
  Amount: ''
})

const GetSthd=ref([{
  id:"",
  "inoutid": "",
      "typeid": "",
      "typename": "",
      "direction": '',
      "inoutdate": "",
      "warehouseid": "",
      "warehousename": "",
      "librarylocationid": "",
      "librarylocationname": "",
      "orderFormId": "",
      "handempid": "",
      "memo": "",
       "rownum": '',
      "unitid": "",
      "prices": "",
      "amount": ""
}])

const units=ref([{
  unitId:'',
  unitName:""
}])

const model=reactive({
  pageindex:1,
  pagesize:5,
  totalCount:0,
  totalPages:0,
})

const Dm_Code=ref([{
  typeid:'',
  typename:""
}])


const Dm_Warehouser=ref([{
  warehouseid:'',
  warehousename:""
}])

const Dm_Librarylocation=ref([{
  librarylocationid:'',
  librarylocationname:""
}])


const OrderFormModel=ref([{
  orderFormId:''
}])

const Dm_Item=ref([{
  itemid:'',
  itemname:""
}])

onMounted(() => {
  // 页面加载时获取数据
  SelectView();
})
const SelectView=()=>{

  axios.get('api/app/location/code-list')
  .then(res=>{
    Dm_Code.value=res.data.data;
  })
 
    axios.get('api/app/location/warehouse')
  .then(res=>{
    Dm_Warehouser.value=res.data.data;
  })

     axios.get('api/app/location/library-location')
  .then(res=>{
    Dm_Librarylocation.value=res.data.data;
  })

   axios.get('api/app/order-form/order-form-list')
  .then(res=>{
    OrderFormModel.value=res.data.data;
  })

  
   axios.get('api/app/st-hd/dm_Item')
  .then(res=>{
    Dm_Item.value=res.data.data;
  })

     axios.get('api/goods-management/units')
  .then(res=>{
    units.value=res.data.pageData;
  })

    
   axios.get('api/app/st-hd/st-hd-dto',{
    params: {
      pageindex: model.pageindex,
      pagesize: model.pagesize
    }
   })

  .then(res=>{
    GetSthd.value=res.data.pageData;
    model.totalCount=res.data.totalCount;
    model.totalPages=res.data.totalPages;
  })

}

// 表单校验规则
const formRules = reactive<FormRules>({
  Typename: [
    { required: true, message: '请输入类型名称', trigger: 'blur' }
  ],
  Direction: [
    { required: true, message: '请选择出入库方向', trigger: 'change' }
  ],
  Status: [
    { required: true, message: '请输入状态', trigger: 'blur' }
  ]
})

// 表单引用
const formRef = ref<FormInstance>()

// 弹窗显隐
const dialogVisible = ref(true)

const cnm=reactive({
  isAdd:true,
  isopen:false,
  title:""
})
const codeView = async () => {
  try {
    const response = await axios.post(
      "api/app/dm_Encoderule/start-code",{},
      {
        params: {
          Formtypeid: "入库单"
        }
      }
    );

    if (response.data && response.data.code === 200) {
      form.Inoutid = response.data.data;
    } else {
      ElMessage.error("生成仓库编码失败");
    }
  } catch (error) {
    console.error("请求失败:", error);
  }
}
// 提交表单
const open=(row:any)=>{
  if(row==null)
  {
    cnm.isAdd=true;
    cnm.isopen=true;
    cnm.title="新增入库";
    
    form.Inoutid="";
    form.Typeid="";
    form.Direction="1"; // 默认入库
    form.Inoutdate="";
    form.Warehouseid="";
    form.Librarylocationid="";
    form.OrderFormId="";
    form.Handempid="";
    form.Memo="";
    form.Itemid="";
    form.Quantity="";
    form.Batchcode="";
    form.Invaliddate="";
    form.Up="";
    form.Down="";
    form.Rownum=0;
    form.Unitid="";
    form.Prices="";
    form.Amount="";

  }
  else{
    cnm.isAdd=false;
    cnm.isopen=true;
    cnm.title="修改入库";
   
    form.Inoutid=row.inoutid;
    form.Typeid=row.typeid;
    form.Direction=row.direction; // 默认入库
    form.Inoutdate=row.inoutdate;
    form.Warehouseid=row.warehouseid;
    form.Librarylocationid=row.librarylocationid;
    form.OrderFormId=row.orderFormId;
    form.Handempid=row.handempid;
    form.Memo=row.memo;
    form.Itemid=row.itemid;
    form.Quantity=row.quantity;
    form.Batchcode=row.batchcode;
    form.Invaliddate=row.invalidate;
    form.Up=row.up;
      form.Down=row.down;
      form.Rownum=row.rownum;
    form.Unitid=row.unitid;
    form.Prices=row.prices;
    form.Amount=row.amount;
    // 将修改后的数据存入Updateform
    Updateform.id=row.id;
    
  }
}
// 修改后的handleSubmit函数
const handleSubmit = async () => {
    
    // 调用codeView生成编码
    await codeView();
    
    if(cnm.isAdd==true)
    {
      axios.post("api/app/st-hd/me_St-hd",form)
    .then(res=>{
      if(res.data.code==200){
        ElMessage.success(res.data.message);
        cnm.isopen=false;
        SelectView();
      }else{
        ElMessage.error(res.data.message)
      }
      
    })
    }
    else{
      const updateform={...form,id:Updateform.id}
      axios.put("api/app/st-hd/me_St-hd",updateform)
    .then(res=>{
      if(res.data.code==200){ 
        ElMessage.success(res.data.message);
         cnm.isopen=false;
         SelectView();
      }
      else{
        ElMessage.error(res.data.message)
      }

    }
    )}
  
}




// 暴露弹窗控制（父组件可调用 openDialog 显示）
defineExpose({
  openDialog: () => {
    dialogVisible.value = true
    // 重置表单（可选，根据需求决定）
    formRef.value?.resetFields()
  }
})
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
/* 在原有样式基础上增加 */
.el-form-item__content {
  display: flex;
  align-items: center;
}

.el-select, .el-date-editor, .el-input-number {
  width: 100%;
}

.el-textarea__inner {
  resize: vertical;
}

/* 添加过渡动画 */
.el-row {
  transition: all 0.3s ease;
}

/* 间隔美化 */
.el-col {
  padding: 5px 0;
}

/* 按钮区域阴影 */
.dialog-footer {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  padding: 20px;
  margin-top: 20px;
  border-radius: 4px;
}
</style>